<!-- 求职效果分析组件的封装 -->
<template>
  <div class="container">
    <!-- 头部 -->
    <echartsHeader title="求职效果分析"></echartsHeader>
    <el-row class="screeningCriteria">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchForm" :rules="rulesForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="年龄" class="mini_item" prop="startAge">
              <el-select v-model="searchForm.startAge" filterable placeholder="请选择" :popper-append-to-body="false">
                <el-option v-for="item in 45" :key="item" :value="item+15"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="-" class="mini_item" prop="endAge">
              <el-select v-model="searchForm.endAge" filterable placeholder="请选择" :popper-append-to-body="false">
                <el-option v-for="item in 45" :key="item" :value="item+15"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="searchForm.sex" placeholder="选择性别" :popper-append-to-body="false">
                <el-option v-for="item in options.genderOptions" :label="item.name" :value="item.val" :key="item.val">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学历">
              <XLSelect :value="searchForm.education" @parentEvent="getXLChild" ref="XLDome"></XLSelect>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="薪酬" prop="starteWage">
              <el-input v-model.number="searchForm.starteWage" style="width:100px" placeholder="薪资待遇"></el-input>
              &nbsp;-&nbsp;
              <el-input v-model.number="searchForm.EndWage" style="width:100px" placeholder="薪资待遇">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="行业" style="margin-top:6px">
              <HYSelect :value="searchForm.trade" @parentEvent="getHYChild" ref="HYDome" :type="0"></HYSelect>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="text-align:right">
            <el-form-item>
              <el-button plain @click="queryForm('searchForm')" size="small" class="queryBtn">查询</el-button>
              <el-button @click="resetForm('searchForm')" size="small">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <div class="echarts_container">
      <el-row class="echarts_container_top" :gutter="24">
        <el-col :span="12" class="echarts_top_left">
          <!-- 内容+图表 -->
          <blockContent title="投递转化率">
            <!-- id不要重复 -->
            <div id="echarts_funnel"></div>
          </blockContent>
        </el-col>
        <el-col :span="12">
          <!-- 内容+图表 -->
          <blockContent title="投递聊天率">
            <!-- id不要重复 -->
            <div id="echarts_speak"></div>
          </blockContent>
        </el-col>
      </el-row>
      <el-row class="echarts_container_bottom mt16" :gutter="24">
        <el-col :span="12" class="echarts_top_left">
          <!-- 内容+图表 -->
          <blockContent title="人才库曝光率">
            <!-- id不要重复 -->
            <div id="echarts_exposurerate"></div>
          </blockContent>
        </el-col>
        <el-col :span="12">
          <!-- 内容+图表 -->
          <blockContent title="人才库面邀率">
            <!-- id不要重复 -->
            <div id="echarts_rview"></div>
          </blockContent>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { MyEcharts } from '../utils/echart-utils.js';
import { deliverConversion, resumeExposure, resumeInterview, chartPerson } from '../../../../api/jobHuntingStatistics.js';
import moment from 'moment';
export default {
  name: 'container',
  data () {
    // 校验年龄
    let checkAge = (rule, value, callback) => {
      if (this.searchForm.startAge > this.searchForm.endAge) {
        callback(new Error('年龄选择错误'));
      } else {
        callback();
        this.$refs['searchForm'].clearValidate()
      }
    };
    // 薪酬校验
    let checkWage = (rule, value, callback) => {
      if (value < 10 && value !== '') {
        callback(new Error('不能小于10'));
      } else if (this.searchForm.starteWage >= this.searchForm.EndWage && value !== '') {
        callback(new Error('不能大于或等于最大值'));
      } else if (typeof this.searchForm.EndWage != 'number' && value !== '') {
        callback(new Error('最大薪资必须为数字类型'))
      } else {
        callback();
        this.$refs['searchForm'].clearValidate()
      }
    };
    return {
      // 查询条件
      searchForm: {
        startAge: 16,
        endAge: 60,
        // 性别
        sex: '',
        // 学历
        education: '',
        // 薪资
        starteWage: '',
        EndWage: '',
        // 行业
        trade: ''
      },
      options: {
        // 性别options
        genderOptions: [{ val: 1, name: '男' }, { val: 2, name: '女' }],
      },
      rulesForm: {
        endAge: [{ validator: checkAge }],
        startAge: [{ validator: checkAge }],
        starteWage: [{ validator: checkWage }],
        EndWage: [{ validator: checkWage }],
      },
      // 漏斗
      Funnel: {
        // 弹框提示
        tooltip: {
          trigger: 'item',
          // formatter: "{b} : {c} {d}%",   // a对应系列名称,b对应数据项名称,c对应数据项值.
          formatter: (params) => {
            return '<div>' + params.marker + params.name + '：&nbsp;' + params.value + "&nbsp; " + params.data.percent + '%' + '</div>';
          },
          // formatter: function toPercent (val) {
          //   console.log(val, this, '需要的')
          //   return '<div>' + val.marker + val.name + '：&nbsp;' + val.value + "&nbsp;" + val.percent + '%' + '</div>';
          // },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 11
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

        legend: ['投递量', '浏览量', '有意向', '邀请面试'],
        // 金字塔块的颜色
        color: ['#5789F1', '#56CEA3', '#596B90', '#EAB41A'],
        // xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            // gap: 2,
            // label: {
            //   show: true,
            //   position: 'inside'
            // },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            label: {
              normal: {
                position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                // formatter: '{d}%',      // 标签文本
                formatter: (params) => {
                  return params.data.percent + '%';
                },
                textStyle: {
                  color: '#fff'
                }
              },
              // normal: {
              //   formatter: '{b}'    // 金字塔外标签
              // },
              emphasis: {         // 本系列每个数据项中特定的 tooltip 设定
                position: 'inside',
                // formatter: '{b}: {d}%',
                formatter: (params) => {
                  return params.name + '：' + params.data.percent + '%';
                },
              }

            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            data: [

              { value: 0, name: '投递量', percent: 0 },
              { value: 0, name: '浏览量', percent: 0 },
              { value: 0, name: '有意向', percent: 0 },
              { value: 0, name: '邀请面试', percent: 0 },
            ]
          }
        ]
      },
      // 环形图~投递聊天率
      speak: {
        config: true, // 如果为true 则展示自己的样式 否则用默认样式
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params, '事实上')
            return '<div>' + params.marker + params.name + '：&nbsp;' + params.value + "&nbsp;" + params.percent + '%' + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        color: ['#5789F1', '#E1E3EA'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            radius: ['50%', '70%'],
            data: [
              { value: 0, name: '单人聊天率' },
              { value: 0, name: '双人聊天率' },
            ],
            label: {
              normal: {
                // position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                // formatter: '{b}：{c} ({d}%)',      // 标签文本
                formatter: '{b}：{d}%',
                textStyle: {
                  color: "rgba(255, 255, 255, .75)",
                  fontSize: 10
                }
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 环形图~人才库曝光率
      exposurerate: {
        config: true, // 如果为true 则展示自己的样式 否则用默认样式
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params, '事实上')
            return '<div>' + params.marker + params.name + '：&nbsp;' + params.value + "&nbsp;" + params.percent + '%' + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        color: ['#5789F1', '#E1E3EA'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            radius: ['50%', '70%'],
            data: [
              { value: 0, name: '人才库曝光率' },
              { value: 0, name: '人才库未曝光率' },
            ],
            label: {
              normal: {
                // position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                // formatter: '{b}：{c} ({d}%)',      // 标签文本
                formatter: '{b}：{d}%',
                textStyle: {
                  color: "rgba(255, 255, 255, .75)",
                  fontSize: 10
                }
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 环形图~人才库面邀率
      rview: {
        config: true, // 如果为true 则展示自己的样式 否则用默认样式
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params, '事实上')
            return '<div>' + params.marker + params.name + '：&nbsp;' + params.value + "&nbsp;" + params.percent + '%' + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        color: ['#5789F1', '#E1E3EA'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            radius: ['50%', '70%'],
            data: [
              { value: 0, name: '人才库面邀率' },
              { value: 0, name: '人才库未面邀率' },
            ],
            label: {
              normal: {
                // position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                // formatter: '{b}：{c} ({d}%)',      // 标签文本
                formatter: '{b}：{d}%',
                textStyle: {
                  color: "rgba(255, 255, 255, .75)",
                  fontSize: 10
                }
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    }
  },
  created () {

  },
  mounted () {
    //  初始化加载数据
    // this.initData()
    this.queryForm('searchForm')

  },
  methods: {
    // 首次获取数据
    initData (parmas) {
      if (!parmas) {
        parmas = {}
      }
      Promise.all([deliverConversion(parmas), resumeExposure(parmas), resumeInterview(parmas), chartPerson(parmas)]).then(res => {
        console.log(res, 'data')
        //投递转化率
        // 投递量
        this.Funnel.series[0].data[0].value = res[0].data.allCount.count;
        this.Funnel.series[0].data[0].percent = res[0].data.allCount.bfb.toFixed(2);
        //  浏览量
        this.Funnel.series[0].data[1].value = res[0].data.pageView.count;
        this.Funnel.series[0].data[1].percent = res[0].data.pageView.bfb.toFixed(2);
        // 有意向
        this.Funnel.series[0].data[2].value = res[0].data.mindView.count;
        this.Funnel.series[0].data[2].percent = res[0].data.mindView.bfb.toFixed(2);
        // 邀请面试
        this.Funnel.series[0].data[3].value = res[0].data.interView.count;
        this.Funnel.series[0].data[3].percent = res[0].data.interView.bfb.toFixed(2);

        //人才库曝光率
        //人才曝光率
        this.exposurerate.series[0].data[0].value = res[1].data.exposureNum;
        //人才未曝光率
        this.exposurerate.series[0].data[1].value = res[1].data.notExposureNum;



        // 人才库面邀率
        this.rview.series[0].data[0].value = res[2].data.personInterViewNum;
        // 人才库未面邀率
        this.rview.series[0].data[1].value = res[2].data.personNotInterViewNum;

        // 单人聊天率
        this.speak.series[0].data[0].value = res[3].data.one;
        // 双人率
        this.speak.series[0].data[1].value = res[3].data.two;
        this.$forceUpdate()
        this.optionChart();
      })
    },


    // 查询
    queryForm (searchForm) {
      this.$refs[searchForm].validate((valid) => {
        if (valid) {
          let parmas = { ...this.searchForm };
          let startAge = parmas.startAge;
          //根据年龄确定出生日期范围
          parmas.startAge = moment()
            .subtract(Number(parmas.endAge), 'years')
            .format('YYYY');
          parmas.endAge = moment()
            .subtract(Number(startAge), 'years')
            .format('YYYY');
          if (this.searchForm.trade !== '') {
            // let trade = JSON.stringify(this.searchForm.trade)
            parmas.trade = this.searchForm.trade
          }

          console.log(this.searchForm, '查询条件')
          this.initData(parmas)
        } else {
          return false;
        }
      });

    },
    // 重置
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.searchForm.startAge = 16;
      this.searchForm.endAge = 60;
      this.searchForm.sex = '';
      this.searchForm.education = '';
      this.searchForm.starteWage = '';
      this.searchForm.EndWage = '';
      this.searchForm.trade = '';
      // 调用子组件的方法，清空选中的学历、行业
      this.$refs.XLDome.clearContent();
      this.$refs.HYDome.clearContent();
      this.initData()
    },
    optionChart () {
      // 漏斗
      let option_funnel = MyEcharts.EchartsOption.Funnel('', '', this.Funnel)
      MyEcharts.initChart(option_funnel, 'echarts_funnel')
      let option_speak = MyEcharts.EchartsOption.pie('', '', this.speak);
      MyEcharts.initChart(option_speak, 'echarts_speak');
      let option_exposurerate = MyEcharts.EchartsOption.pie('', '', this.exposurerate);
      MyEcharts.initChart(option_exposurerate, 'echarts_exposurerate');
      let option_rview = MyEcharts.EchartsOption.pie('', '', this.rview);
      MyEcharts.initChart(option_rview, 'echarts_rview');

    },
    // <<< -------------------------- 子组件派发过来的事件 ------------------------------>>>
    // 获取子组件传过来的当前学历值
    getXLChild (cValue) {
      // 接收子组件传过来的值
      this.searchForm.education = cValue
    },
    // 获取子组件传过来的当前行业值
    getHYChild (cValue) {
      // 接收子组件传过来的值
      this.searchForm.trade = cValue;
    }


  },
  watch: {
    // Funnel: function (newVal, oldVal) {
    //   this.option.xAxis.data = newVal.xSer
    //   this.option.series[0].data = newVal.ySer
    //   chartObj.setOption(this.option)
    // },
    // immediate: true,
    // deep: true
  }
}
</script>  
<style scoped>
.container {
    background: #080850;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.screeningCriteria {
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
}
.demo-form-inline {
    height: 100%;
}
.demo-form-inline .el-col {
    height: 50px;
    /* text-align: center; */
}
.demo-form-inline /deep/.el-form-item__content {
    height: 50px;
    line-height: 50px;
}
.el-form--inline .el-form-item,
.el-form--inline /deep/.el-form-item__label {
    color: #fff;
}
.el-form--inline .el-select {
    /* width: 100px; */
}
.el-form--inline .el-form-item {
    margin-bottom: 0;
}
.mini_item {
    height: 50px;
    line-height: 50px;
}
.mini_item .el-select {
    width: 100px;
}
.el-form--inline /deep/.el-input__inner {
    border: 1px solid #1045da;
    background-color: rgba(21, 22, 114, 1);
    color: white;
}
.demo-form-inline .queryBtn {
    /* border: 1px solid #1045da; */
    background: #151672;
    color: #ffffff;
}
/* echarts 图表样式 */
.echarts_container {
    margin-top: 20px;
    margin-top: 53px;
}
.mt16 {
    margin-top: 16px;
}
#echarts_funnel,
#echarts_speak,
#echarts_exposurerate,
#echarts_rview {
    height: 270px;
}
</style>